<template>
  <page-loading :show="pageLoading">
    <view>
      <view class="model">
        <view class="flex pb-20 flex-ai-c">
          <view class="headImg">
            <image
              v-if="userInfo.userImg"
              :src="userInfo.userImg"
              mode="widthFix"
            ></image>
            <i-icon
              v-else
              icon="iconmorentouxiang"
              type="multiple"
              size="50rpx"
            ></i-icon>
          </view>
          <view class="ml-10 flex-1">{{ userInfo.userName }}</view>
          <view @click="phoneClick(userInfo.userMobile)">
            <i-icon
              icon="icondianhua"
              class="middle mr-10"
              type="multiple"
              size="28rpx"
            ></i-icon>
            {{ userInfo.userMobile }}
          </view>
        </view>
        <view class="flex pb-20">
          <view class="model-left flex color-999 flex-jc-sb">
            <view class="carImg mr-10">
              <!-- <image :src="carInfo.img" mode="widthFix" class="img"></image
          > -->
            </view>
            <view>车型:</view>
          </view>
          <view class="width-80 color-333">{{ carInfo.name }}</view>
        </view>
        <view class="flex pb-20">
          <view class="model-left color-999"> 车牌号: </view>
          <view class="color-333">{{ carInfo.carbrand }}</view>
        </view>
        <view class="flex pb-20">
          <view class="model-left color-999"> VIN: </view>
          <view class="color-333">{{ carInfo.vin }}</view>
        </view>
        <!-- <view class="model-foot flex">
        <view class="width-50 u-border-right" @click="contactSeller">
          <i-icon
            icon="iconxiaoxi1"
            class="middle mr-10"
            type="multiple"
            size="34rpx"
          ></i-icon>
          联系买家
        </view>
        <view class="width-50" @click="phoneClick(data.mobile)">
          <i-icon
            icon="icondianhua"
            class="middle mr-10"
            type="multiple"
            size="34rpx"
          ></i-icon>
          致电买家
        </view>
      </view> -->
      </view>
      <view class="model list">
        <view class="title"> 卡券信息</view>
        <view class="name"
          >{{ packageName }}
          <view class="name-tips">包含以下好礼</view>
        </view>
        <u-checkbox-group
          active-color="#FBD220"
          shape="circle"
          icon-size="30"
          size="40"
          width="100%"
          @change="checkboxChange"
        >
          <view v-for="(item, i) in list" :key="i" class="list-wrap">
            <view
              class="card flex"
              :class="{ 'bg-f6': !item.goodsServiceList[0].isUsable }"
              v-if="item.isMustAll"
            >
              <view class="card-left">
                <u-checkbox
                  v-model="item.checked"
                  :disabled="!item.isUsable"
                  :name="'[' + i + ',9999]'"
                ></u-checkbox>
              </view>
              <view class="card-right flex-1">
                <view class="card-right-name">{{ item.group_Name }}</view>
                <view
                  class="card-content flex"
                  v-for="(item1, index) in item.goodsServiceList"
                  :key="index"
                >
                  <view
                    class="card-content-img"
                    v-if="item1.goodsRuleType === 1"
                  >
                    <image
                      class="img"
                      :src="item1.pic_Details_URL"
                      mode="scaleToFill"
                    ></image>
                  </view>
                  <view
                    class="color-999 font-24"
                    v-else-if="item1.goodsRuleType === 2"
                    >服务工时费:</view
                  >
                  <view class="color-999 font-24" v-else>代金券:</view>
                  <view
                    class="card-content-right flex flex-dir-c flex-jc-sb flex-1"
                  >
                    <view class="card-conten-name">
                      {{ item1.name }}
                    </view>
                    <view class="card-conten-price flex flex-jc-sb flex-ai-c">
                      <view class="flex flex-ai-c">
                        <!--  <view class="label label-FBB000">全合成</view>
                    <view class="label label-60C534">4L</view> -->
                      </view>
                      <view class="flex flex-ai-c">
                        <view class="price">￥{{ item1.sale_Price }}</view>
                        <view class="number" v-if="item1.left_Num !== null"
                          >x{{ item1.left_Num }}</view
                        >
                        <view class="number" v-else>365x无限</view>
                      </view>
                    </view>
                  </view>
                  <!-- <view v-else class="flex-1 flex card-content-right pr-20">
                  <view class="flex-1 color-333 font-24">{{ item1.name }}</view>
                  <view class="font-26 color-333 pr-20"
                    >￥{{ item1.sale_Price }}</view
                  >
                  <view class="font-26 color-999">x1</view>
                </view> -->
                </view>
              </view>
            </view>
            <view class="card" v-else :class="{ 'bg-f6': !item.isUsable }">
              <view class="card-right">
                <view class="card-right-name pl-75">{{ item.group_Name }}</view>
                <view
                  class="flex flex-ai-c"
                  :class="{ 'bg-f6': !item1.isUsable }"
                  v-for="(item1, index) in item.goodsServiceList"
                  :key="index"
                >
                  <view class="card-right-checkkbox">
                    <u-checkbox
                      v-model="item1.checked"
                      :disabled="!item1.isUsable"
                      :name="'[' + i + ',' + index + ']'"
                    ></u-checkbox>
                  </view>
                  <view class="card-content flex flex-1">
                    <view
                      class="card-content-img"
                      v-if="item1.goodsRuleType === 1"
                    >
                      <image
                        class="img"
                        :src="item1.pic_URL"
                        mode="scaleToFill"
                      ></image>
                    </view>
                    <view
                      v-else-if="item1.goodsRuleType === 2"
                      class="color-999 font-24"
                      >服务工时费:</view
                    >
                    <view v-else class="color-999 font-24">代金券:</view>
                    <view
                      class="card-content-right flex flex-dir-c flex-jc-sb flex-1"
                    >
                      <view class="card-conten-name">
                        {{ item1.name }}
                      </view>
                      <!-- <view class="card-conten-label" v-if="!item1.isUsable"
                      >此服务项次数已用完，不可使用</view
                    > -->
                      <view class="card-conten-price flex flex-jc-sb flex-ai-c">
                        <view class="flex flex-ai-c flex-1"> </view>
                        <view class="flex flex-ai-c">
                          <view class="price">￥{{ item1.sale_Price }}</view>
                          <view class="number" v-if="item1.left_Num !== null"
                            >x{{ item1.left_Num }}</view
                          >
                          <view class="number" v-else>365x无限</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </u-checkbox-group>
      </view>
      <view class="sub-btn">
        <button :class="issub ? 'btn-primary' : 'btn-disable'" @click="sub">
          确认核销
        </button>
      </view>

      <!-- 弹框 -->
      <view class="popup">
        <u-popup
          v-model="popupShow"
          mode="bottom"
          border-radius="10"
          height="740rpx"
        >
          <view class="popup-title"
            >核销信息（{{ selectedList.length }}项）</view
          >
          <view>
            <scroll-view scroll-y="true" style="height: 500rpx">
              <view
                class="popup-content flex"
                v-for="(item, index) in selectedList"
                :key="index"
              >
                <view class="popup-content-img" v-if="item.goodsRuleType === 1">
                  <image
                    class="img"
                    :src="item.pic_Details_URL"
                    mode="scaleToFill"
                  ></image>
                </view>
                <view
                  v-else-if="item.goodsRuleType === 2"
                  style="padding: 30rpx 0"
                  >服务工时费：</view
                >
                <view v-else style="padding: 30rpx 0">代金券：</view>
                <view
                  class="bb-2 flex flex-jc-sb flex-1"
                  style="padding: 30rpx 0"
                >
                  <view>
                    <view class="color-333 font-26" style="text-align: left">{{
                      item.name
                    }}</view>
                    <!-- <view class="flex flex-ai-c">
                    <view class="label label-FBB000">全合成</view>
                    <view class="label label-60C534">4L</view>
                  </view> -->
                  </view>
                  <view class="popup-content-right">
                    <view class="color-333 font-26"
                      >￥{{ item.sale_Price }}</view
                    >
                    <view class="color-999 font-26">x{{ item.count }}</view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="popup-btn flex">
            <button @click="popupShow = false" class="btn-cancel">取消</button>
            <button @click="submit" class="btn-primary">确认核销</button>
          </view>
        </u-popup>

        <!-- 绑定车辆提示 -->
        <u-popup
          v-model="addCarPopup"
          mode="center"
          border-radius="20"
          width="600"
        >
          <view class="popup-content">
            <view class="title">温馨提示</view>
            <view class="content"
              >购买的【{{ packageName }}】将绑定<br />车牌号为：<text
                class="car-number"
                >{{ carInfo.carbrand }}</text
              ><br />
              {{ carInfo.name }}<br />
              绑定不可更改</view
            >
            <view class="btn-box flex">
              <button class="btn-left" @click="addCarPopup = false">
                取消
              </button>
              <button class="btn-right" @click="addCarComfirm">确定</button>
            </view>
          </view>
        </u-popup>
      </view>
    </view></page-loading
  >
</template>

<script>
export default {
  data() {
    return {
      id: '', //到店单id
      packageId: '', //福利包id
      // carNumber: '', //车牌
      list: [], //了列表
      selectedList: [], //选中列表
      packageName: '', //福利包名称
      popupShow: false, //弹框显示
      isBindCar: false, //福利包是否已绑定车辆
      addCarPopup: false, //绑定车辆弹窗
      fromPage: 0, //0 从订单流程进入 1 从扫码创建到店单进入 2 订单手动选择福利包
      pageLoading: false, //初始化加载效果
    }
  },

  onLoad(e) {
    this.packageId = e.packageId
    this.fromPage = e.type ? Number(e.type) : 0
    this.id = e.id ? e.id : ''
    this.getInfo()
  },

  computed: {
    issub() {
      return this.selectedList.length
    },

    //用户信息
    userInfo() {
      return {
        userName: this.$store.state.afterSales.userName,
        userMobile: this.$store.state.afterSales.userMobile,
        userId: this.$store.state.afterSales.userId,
        userImg: this.$store.state.afterSales.userImg,
      }
    },

    // 车辆信息
    carInfo() {
      return this.$store.state.afterSales.carInfo
    },

    orderGoodsList() {
      return this.$store.state.afterSales.orderGoodsList
    },

    orderServiceList() {
      return this.$store.state.afterSales.orderServiceList
    },
  },

  methods: {
    //查询福利包详情
    async getInfo() {
      // uni.showLoading({
      //   title: '加载中',
      // })
      try {
        let res
        if (this.fromPage === 2) {
          res = await this.$api.afterSales.getUsableCouponsByIdAndGoods({
            id: this.packageId,
            car_num: this.carInfo.carbrand,
            goodsList: this.orderGoodsList,
            serviceFeeList: this.orderServiceList,
          })
        } else {
          res = await this.$api.afterSales.getUsableCouponsById({
            id: this.packageId,
            car_num: this.carInfo.carbrand,
          })
        }
        this.packageName = res.data.coupon.coupon_Package_Name
        this.isBindCar = !res.data.isNeedAddCar
        for (let i = 0; i < res.data.groupList.length; i++) {
          let tmp = false
          if (!res.data.groupList[i].isMustAll) {
            for (
              let j = 0;
              j < res.data.groupList[i].goodsServiceList.length;
              j++
            ) {
              if (res.data.groupList[i].goodsServiceList[j].isUsable) {
                tmp = true
              }
              res.data.groupList[i].goodsServiceList[j].checked =
                res.data.groupList[i].goodsServiceList[j].isUsable
            }
          } else {
            let index = res.data.groupList[i].goodsServiceList.findIndex(
              (item) => item.isUsable === true
            )
            tmp = index !== -1
            if (tmp) {
              for (
                let j = 0;
                j < res.data.groupList[i].goodsServiceList.length;
                j++
              ) {
                if (res.data.groupList[i].goodsServiceList[j].isUsable) {
                  tmp = true
                }
                res.data.groupList[i].goodsServiceList[j].isUsable = true
              }
            }
          }
          this.list.push({
            group_Name: res.data.groupList[i].group_Name,
            isMustAll: res.data.groupList[i].isMustAll,
            checked: tmp,
            isUsable: tmp,
            goodsServiceList: [...res.data.groupList[i].goodsServiceList],
          })
          if (i === res.data.groupList.length - 1) {
            // uni.hideLoading()
            this.pageLoading = true
          }
        }

        this.list.forEach((item1) => {
          item1.goodsServiceList.forEach((item2) => {
            if (item2.checked) {
              this.selectedList.push({
                ...item2,
                // goods_Calculate_Rule_Id: item2.goods_Calculate_Rule_Id, //优惠商品或服务计算规则Id
                // goods_Service_Type_Id: item2.goods_Service_Type_Id,
                // name: item2.name,
                // sale_Price: item2.sale_Price,
                // actuallyAmount: item2.actuallyAmount,
                // discountAmount: item2.discountAmount,
                // left_Num: item2.left_Num,
                // coupon_Details_Id: item2.coupon_Details_Id,
                coupon_Id: this.packageId,
                // isGoods: item2.isGoods,
                // isUsable: item2.isUsable,
                // count: item2.count,
              })
            }
            if (item1.checked && item1.isMustAll) {
              this.selectedList.push({
                ...item2,
                coupon_Id: this.packageId,
              })
            }
          })
        })
      } catch (error) {
        // uni.hideLoading()
        this.pageLoading = true
        setTimeout(() => {
          if (this.fromPage === 1) {
            thisuni.redirectTo({
              url: '/pages_afterSales/arrivalRecordList/arrivalRecordList',
            })
          } else {
            uni.navigateBack({
              delta: 1,
            })
          }
        }, 2000)
      }
    },

    //选择套餐项目
    checkboxChange(e) {
      this.selectedList = []
      for (let i = 0; i < e.length; i++) {
        let arr = JSON.parse(e[i])
        if (arr[1] === 9999) {
          this.list[arr[0]].goodsServiceList.forEach((element) => {
            this.selectedList.push({
              ...element,
              coupon_Id: this.packageId,
            })
          })
        } else {
          this.selectedList.push({
            ...this.list[arr[0]].goodsServiceList[arr[1]],
            coupon_Id: this.packageId,
          })
        }
      }
    },

    //提交按钮
    sub() {
      if (!this.issub) {
        uni.showToast({
          title: '请选择要使用的套餐卡项目',
          icon: 'none',
          duration: 2000,
        })
      } else if (!this.isBindCar) {
        this.addCarPopup = true
      } else {
        this.popupShow = true
      }
    },

    //第二次确认核销
    submit() {
      let groupList = [],
        total = 0

      if (this.id) {
        this.list.forEach((item1) => {
          if (
            item1.isMustAll &&
            item1.checked &&
            item1.goodsServiceList[0].isUsable
          ) {
            groupList.push({
              group_Name: item1.group_Name,
              isMustAll: item1.isMustAll,
              goodsServiceList: [...item1.goodsServiceList],
            })

            item1.goodsServiceList.forEach((i) => {
              total += Number(-i.discountAmount)
            })
          } else if (!item1.isMustAll) {
            let arr = []
            arr = item1.goodsServiceList.filter((item2) => {
              if (item2.checked && item2.isUsable) {
                total += Number(-item2.discountAmount)
                return item2
              }
            })
            if (arr.length) {
              groupList.push({
                group_Name: item1.group_Name,
                isMustAll: item1.isMustAll,
                goodsServiceList: arr,
              })
            }
          }
        })
        this.$store.commit('afterSales/setGroupList', groupList)
        this.popupShow = false
        uni.navigateTo({
          url:
            '/pages_afterSales/submitOrderDetailByCoupon/submitOrderDetailByCoupon?isPackage=1&id=' +
            this.id +
            '&name=' +
            this.packageName,
        })
      } else {
        this.list.forEach((item1) => {
          if (
            item1.isMustAll &&
            item1.checked &&
            item1.goodsServiceList[0].isUsable
          ) {
            // groupList.push({
            //   group_Name: item1.group_Name,
            //   isMustAll: item1.isMustAll,
            //   goodsServiceList: [...item1.goodsServiceList],
            // })
            groupList = groupList.concat([...item1.goodsServiceList])

            item1.goodsServiceList.forEach((i) => {
              total += Number(-i.discountAmount)
            })
          } else if (!item1.isMustAll) {
            let arr = []
            arr = item1.goodsServiceList.filter((item2) => {
              if (item2.checked && item2.isUsable) {
                total += Number(-item2.discountAmount)
                return item2
              }
            })
            if (arr.length) {
              groupList = groupList.concat(arr)
            }
          }
        })
        uni.$emit('couponChange', {
          coupon: groupList,
          discountTotalAmount: total.toFixed(2),
          type: 2,
        })
        uni.navigateBack({
          delta: 2,
        })
      }
    },

    //绑定车辆
    addCarComfirm() {
      uni.showLoading({
        title: '绑定中...',
      })
      this.$api.afterSales
        .couponBindingCar({
          couponId: this.packageId,
          carNum: this.carInfo.carbrand,
          accountId: this.userInfo.userId,
        })
        .then((res) => {
          uni.hideLoading()
          uni.showToast({
            title: '绑定成功',
            duration: 2000,
          })
          this.isBindCar = true
          this.addCarPopup = false
        })
        .catch((err) => {
          console.log(err)
          uni.hideLoading()
          if (err.msg === '该优惠劵不用绑定爱车') {
            this.isBindCar = true
            this.addCarPopup = false
          }
        })
    },

    //打电话
    phoneClick(phone) {
      uni.makePhoneCall({
        phoneNumber: phone, //仅为示例
      })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: #f6f6f6;
}

.list-wrap {
  width: 100%;
}

.model {
  margin: 20rpx 24rpx;
  padding: 10rpx 20rpx;
  background: #ffffff;
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;

  .model-left {
    width: 140rpx;
    text-align: right;
    padding-right: 20rpx;
  }

  .headImg,
  .carImg {
    width: 54rpx;
    height: 54rpx;
    border-radius: 50%;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
  .carImg {
    width: 36rpx;
    height: 36rpx;
  }
  .listImg {
    width: 140rpx;
    height: 140rpx;
    border-radius: 10rpx;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .titleIcon {
    width: 8rpx;
    height: 30rpx;
    color: #ffe23e;
    background: #ffe23e;
    border-radius: 4rpx;
    margin-top: 6rpx;
  }
  .label {
    text-align: center;
    padding: 2rpx 10rpx;
    border-radius: 20rpx;
    margin: 6rpx 8rpx;
  }
  .col60C534 {
    border: 2rpx solid #60c534;
    color: #60c534;
  }
  .colfbb {
    border: 2rpx solid #fbb000;
    color: #fbb000;
  }
  .line48 {
    line-height: 48rpx !important;
  }

  .model-foot {
    border-top: 2rpx solid #eee;
    padding: 20rpx 0;

    .width-50 {
      width: 50%;
      text-align: center;
    }

    .u-border-right {
      border-right: 2rpx solid #eee;
    }
  }

  .pb-20 {
    padding-bottom: 20rpx;
  }

  .pr-20 {
    padding-right: 20rpx;
  }
}

.list {
  padding: 0;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    padding: 10rpx 20rpx;
  }

  .name {
    position: relative;
    padding: 30rpx 0 40rpx;
    text-align: center;
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
    border-bottom: 4rpx dotted #fbb000;
    margin: 0 20rpx 15rpx;

    .name-tips {
      position: absolute;
      bottom: -13rpx;
      left: 50%;
      margin-left: -100rpx;
      font-size: 26rpx;
      font-weight: bold;
      color: #fbb000;
      width: 200rpx;
      text-align: center;
      background: #fff;
    }
  }

  .card {
    padding-top: 30rpx;

    .card-left {
      width: 75rpx;
      padding-left: 20rpx;
    }
    .card-right {
      .card-right-checkkbox {
        width: 75rpx;
        padding-left: 20rpx;
      }
      .card-right-name {
        padding-bottom: 10rpx;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #000000;
      }
      .pl-75 {
        padding-left: 75rpx;
      }

      .card-content {
        padding: 20rpx 0 38rpx;
        border-bottom: 2rpx solid #eee;
        margin-right: 20rpx;

        .card-content-img {
          width: 140rpx;
          height: 140rpx;
          border-radius: 10rpx;
          background: #999999;

          image {
            width: 140rpx;
            height: 140rpx;
            border-radius: 10rpx;
          }
        }

        .card-content-service {
          width: 140rpx;
        }

        .card-content-right {
          padding-left: 20rpx;
        }

        .card-conten-name {
          font-size: 26rpx;
          font-weight: 500;
          color: #333333;
          padding-right: 120rpx;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
          white-space: normal !important;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .card-conten-label {
          font-size: 20rpx;
          font-weight: 500;
          color: #333333;
        }

        .card-conten-price {
          .price {
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
            padding-right: 20rpx;
          }

          .number {
            font-size: 26rpx;
            font-weight: 500;
            color: #999999;
          }
        }
      }
    }
  }
}

.popup {
  .popup-title {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    border-bottom: 2rpx solid #eee;
  }

  .popup-content {
    padding: 0 30rpx 10rpx;
    line-height: 50rpx;

    .popup-content-img {
      width: 80rpx;
      height: 80rpx;
      background: #999;
      border-radius: 10rpx;
      margin-right: 20rpx;
      margin-top: 30rpx;
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 10rpx;
      }
    }

    .popup-content-right {
      width: 200rpx;
      text-align: right;
    }
  }

  .popup-btn {
    height: 146rpx;
    padding: 20rpx 24rpx 0;
    box-shadow: 0 -5rpx 15rpx 5rpx rgba(0, 0, 0, 0.1);
    .btn-cancel {
      width: 50%;
      height: 88rpx;
      line-height: 88rpx;
      background: #333333;
      border-radius: 44rpx 0rpx 0rpx 44rpx;
      font-size: 32rpx;
      color: #ffe23e;
    }

    .btn-primary {
      width: 50%;
      border-radius: 0 44rpx 44rpx 0;
    }
  }

  .bb-2 {
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #eee;
  }
}

.label {
  height: 38rpx;
  line-height: 38rpx;
  padding: 0 10rpx;
  border: 2rpx solid #fbb000;
  border-radius: 18rpx;
  font-size: 22rpx;
  font-weight: 500;
  margin-right: 20rpx;
}
.label-FBB000 {
  color: #fbb000;
  border: 2rpx solid #fbb000;
}
.label-60C534 {
  color: #60c534;
  border: 2rpx solid #60c534;
}

.bg-f6 {
  background: #f6f6f6;
}

.sub-btn {
  background: #fff;
  padding: 15rpx 0;
}

// 提示弹框
.popup-content {
  padding: 30rpx 46rpx;
  text-align: center;

  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
  }

  .content {
    padding: 46rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;

    .car-number {
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .btn-box {
    .btn {
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
    }

    .btn-left {
      width: 50%;
      border-radius: 39rpx 0 0 39rpx;
      height: 78rpx;
      font-size: 30rpx;
      background: #333;
      color: #ffe23e;
    }

    .btn-right {
      width: 50%;
      border-radius: 0 39rpx 39rpx 0;
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
      background: linear-gradient(-90deg, #fdd421, #ffe23e);
    }
  }

  button {
    background: linear-gradient(-90deg, #fbd220, #ffe23e);
    border-radius: 44rpx;

    &::after {
      border: 0;
    }
  }
}

/deep/ .uicon-checkmark:checked {
  color: #000 !important;
}

/deep/ uni-button:after {
  border: none;
}
</style>
